import React,{useState,useEffect} from 'react'
import { Layout, Menu, Breadcrumb, Input, Collapse, Button } from 'antd';
import { connect, useDispatch, useSelector } from "react-redux"
import {Switch,Route, Redirect} from 'react-router-dom'
import {AddTodolistAC,UpdateOldTimeAC} from '../../../redux/actions/todolIstAc'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
import TodoList from './TodoList'
import MyEventListener from '../../../utils/bus'
import Item from './item'
import Default from '../today/item/Default'
export default function Today(props) {
    const dispatch = useDispatch()
    const [collapsed, setcollapsed] = useState(false)
    const { Header, Content, Sider } = Layout;
    const result = useSelector(state => {
        return {
            todolistData: state.todoRC.todolist
        }
    })
    // const toggle = () => {
    //     setcollapsed(!collapsed);
    // };

     //获得输入框内容,并存储到仓库
     const getContent = (e) => {
        console.log(e.target.value);
        let count = result.todolistData.length
        dispatch(AddTodolistAC({
            id:++count,
            title:e.target.value,
            createTime:new Date().toLocaleDateString(),
            oldTime:false,
            done:false,
            children:[]
        }))
    }

    //挂载
    useEffect(() => {
        console.log(props);
        console.log('result',result);
        //当天时间和各个任务时间进行一个对比，并修改是否过期
        dispatch(UpdateOldTimeAC(new Date().toLocaleDateString()))
    }, [])

    const toggleC = ()=>{
         MyEventListener.emit("toggle",!collapsed)
         setcollapsed(!collapsed)
    }
    return (
        <div>
             <Content
                            className="site-layout-background"
                            style={{
                                margin: 0,
                                minHeight: 280,
                                paddingTop: 0,
                                backgroundColor: 'black',
                                display: 'flex'
                            }}
                        // theme='light'
                        >
                            <Layout style={{ flexGrow: 6, borderRight: '1px solid rgb(243,243,243)', padding: '0 20px 0', backgroundColor: 'white',height:'100vh' }}>
                                <Header className="site-layout-background" style={{ padding: '0', backgroundColor: 'white', fontSize: '17px' }}>
                                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                        className: 'trigger',
                                        // onClick:()=>{ MyEventListener.emit("toggle")}
                                        onClick:toggleC
                                    })}
                                    <span style={{ fontSize: '20px' }}> 今天</span>
                                </Header>
                                <Input onPressEnter={getContent} placeholder='+ 添加"今天"的任务至收集箱' style={{ borderRadius: '5px', height: '38px' }}>
                                </Input>
                                <TodoList></TodoList>
                            </Layout>
                            <Layout style={{ width: '200px', backgroundColor: 'white', flexGrow: 4 }}>
                                    <Switch>
                                        <Redirect exact from='/task/today' to='/task/today/default'></Redirect>
                                        <Route path='/task/today/default' component={Default}></Route>
                                        <Route path='/task/today/item/:id' component={Item}></Route>
                                    </Switch>
                            </Layout>
                        </Content>
        </div>
    )
}
